<!DOCTYPE html>
<html  lang="zh-CN" xmlns:th="http://www.thymeleaf.org" >
<head lang="en" >
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>潮人电商后台</title>
    <link rel="stylesheet" type="text/css" href="/bootstarp/css/bootstrap.css" />
    <script type="text/javascript" src="/bootstarp/js/bootstrap.js"></script>
    <script type="text/javascript" src="/bootstarp/js/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>

<body>
<!--头部-->
    <header class="publicHeader">
        <h1>潮人管理系统</h1>
        <div class="publicHeaderR">
            <p><span>下午好！</span><span style="color: #fff21b"  th:text="${session.user.UAccount}"> Admin</span> , 欢迎你！</p>
            <a href="/logout">退出</a>
        </div>
    </header>
<!--时间-->
    <section class="publicTime">
        <span id="time">2015年1月1日 11:11  星期一</span>
        <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    </section>
<!--主体内容-->
    <section class="publicMian ">
        <div class="left">
            <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
            <nav>
                <ul class="list">
                    <li ><a href="/productPage">商品管理</a></li>
                    <li><a href="/orderFromPage">订单管理</a></li>
                    <li><a href="/gongyingPage">供应商管理</a></li>
                    <li><a href="/yuangongPage">员工管理</a></li>
                    <li><a href="/passwordPage">密码修改</a></li>
                    <li><a href="/logout">退出系统</a></li>
                </ul>
            </nav>
        </div>
        <div class="right">
            <div class="location">
                <strong>你现在所在的位置是:</strong>
                <span>商品管理页面</span>
            </div>
            <div class="search">
                <span>商品名称: </span>
                <input id="proName" type="text" placeholder="请输入商品的名称" name="proName"/>
                
                <span>供应商: </span>
                <select id="yy" name="gId" >
                    <option value="">--请选择--</option>
                </select>

                <span>是否上架: </span>
                <select id="proPutaway" name="proPutaway">
                    <option value="">--请选择--</option>
                    <option value="1">未上架</option>
                    <option value="0">已上架</option>
                </select>

                <input type="button" value="查询" onclick="query()"/>
              <a href="/productAddPage">添加商品</a>
            </div>
            <!--账单表格 样式和供应商公用-->
            <table class="providerTable" cellpadding="0" cellspacing="0">
                <tr class="firstTr">
                    <th width="5%">商品id</th>
                    <th width="10%">商品名称</th>
					<th width="10%">商品图片</th>
                    <th width="10%">供应商</th>
                    <th width="10%">商品价格</th>
					 <th width="10%">商品库存</th>
                    <th width="10%">是否上架</th>
                    <th width="20%">添加时间</th>
                    <th width="30%">操作</th>
                </tr>
                <tbody id="xx">


                </tbody>
            </table>

            <div style="margin-top: 100px; margin-left: 420px;">
            <nav aria-label="Page navigation">
                <ul class="pagination" id="fenye">
<!--                    <li>-->
<!--                        <a href="#" aria-label="Previous">-->
<!--                            <span aria-hidden="true">&laquo;</span>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li><a href="#">1</a></li>-->
<!--                    <li><a href="#">2</a></li>-->
<!--                    <li><a href="#">3</a></li>-->
<!--                    <li><a href="#">4</a></li>-->
<!--                    <li><a href="#">5</a></li>-->
<!--                    <li>-->
<!--                        <a href="#" aria-label="Next">-->
<!--                            <span aria-hidden="true">&raquo;</span>-->
<!--                        </a>-->
<!--                    </li>-->
                </ul>
            </nav>

               </div>
        </div>
    </section>

<!--点击删除按钮后弹出的页面-->
<div class="zhezhao"></div>
<div class="remove" id="removeBi">
    <div class="removerChid">
        <h2>提示</h2>
        <div class="removeMain">
            <p>你确定要删除该订单吗？</p>
            <a href="#" id="yes">确定</a>
            <a href="#" id="no">取消</a>
        </div>
    </div>
</div>

    <footer class="footer">
    </footer>


<script src="/js/js.js"></script>
<script src="/js/time.js"></script>



<script>


        var currentPage=1;
        var pageCount=1;

       $(function () {


         loadData();

       })


        function loadData(){

            $.ajax({

                url:"/selectAll",
                type:"get",
                data:"currentPage="+currentPage,
                success:function (data) {

                    // alert(data);
                    parse(data);
                    currentPage=data.pageInfo.pageNum;
                    pageCount =data.pageInfo.pages;

                    fenye(data);
                }
            })

        }




       function parse(data) {

          var list = data.pageInfo.list;
            var  gongyings=data.gongYings;

            $("#xx").html("");
          for (var index in list){

                 var  list1= list[index];
                  
                 $("#xx").append(
                  "<tr>"+
                 "<td>"+list1.proId+"</td>"+
                 "<td>"+list1.proName+"</td>"+
                 "<td><img width='70px' height='60px' src=/img/"+list1.proImage+"></td>"+
                  "<td>"+list1.gongYing.gname+"</td>"+
                  "<td>"+list1.proPrice+"</td>"+
                  "<td>"+list1.proKucun+"</td>"+
                  "<td>"+list1.proPutaway+"</td>"+
                  "<td>"+list1.proCreateTime+"</td>"+
                  "<td>"+
                     "<a href='javascript:void(0)' onclick='modify("+list1.proId+',"'+list1.proName+'","'+list1.proImage+'",'+list1.proPrice+','+list1.proKucun+',"'+list1.proPutaway+'",'+list1.gongYing.gid+")'>"+"<img src='img/xiugai.png' alt='修改' title='修改'/>"+"</a>"+
                 " <a href='javascript:void(0)'  class='removeBill' onclick='update("+list1.proId+")'>"+"<img src='img/schu.png' alt='删除' title='删除'/>"+"</a>"+
                  "</td>"+
                   "<tr>"
                 )
          }


          for(var index in gongyings){

                  var  gongying =gongyings[index];

                  $("#yy").append(


                  "<option value="+gongying.gid+">"+gongying.gname+"</option>"

                  )
          }
       }


       function query() {

           var proName= $("#proName").val();
            var  gId= $("#yy").val();
           var proPutaway =$("#proPutaway").val()

           $.ajax({

               url:"/query",
               type:"post",
               data:"proName="+proName+"&gId="+gId+"&proPutaway="+proPutaway,
               success:function (data) {

                     if (data.code==0){

                         alert("查询成功");
                     }
                   parseQuery(data.data);
               }
           })
       }


       function parseQuery(data) {

               $("#xx").html("");
           for (var index in data){

                    var m2= data[index];

                    $("#xx").append(

                        "<tr>"+
                        "<td>"+m2.proId+"</td>"+
                        "<td>"+m2.proName+"</td>"+
                        "<td><img width='70px' height='60px' src=/img/"+m2.proImage+"></td>"+
                        "<td>"+m2.gongYing.gname+"</td>"+
                        "<td>"+m2.proPrice+"</td>"+
                        "<td>"+m2.proKucun+"</td>"+
                        "<td>"+m2.proPutaway+"</td>"+
                        "<td>"+m2.proCreateTime+"</td>"+
                        "<td>"+
                        "<a href='/productUpdatePage' >"+"<img src='img/xiugai.png' alt='修改' title='修改'/>"+"</a>"+
                        " <a href='javascript:void(0)' class='removeBill'onclick='update("+m2.proId+")'>"+"<img src='img/schu.png' alt='删除' title='删除'/>"+"</a>"+
                        "</td>"+
                        "<tr>"
                    )
           }
       }



       function update(a) {


             if (confirm("是否删除该商品?")){

                  location.href="http://localhost:8080/deleteProduct?proId="+a;
             }
       }


       /**
        * 枫叶查询
        */

       function fenye(data) {

           $("#fenye").html("");

           $("#fenye").append(

           "<li class='"+(currentPage==1?"disabled":"")+"'>"+
           '<a href="javascript:void(0)" aria-label="Previous" onclick="prePage('+(currentPage-1)+')">'+
               '<span aria-hidden="true">&laquo;</span>'+
           '</a>'+
           "</li>");


           for (var index = 1 ; index<= pageCount ; index++){


               $("#fenye").append(
         "<li class='"+(currentPage==index?"active":"")+"'><a href='javascript:void(0)' onclick='indexPage("+index+")'>"+index+"</a></li>");

           }



           $("#fenye").append(

               "<li class='"+(currentPage==pageCount?"disabled":"")+"'>"+
               "<a href='javascript:void(0)' onclick='nextPage("+(currentPage+1)+")' aria-label='Next'>"+
               '<span aria-hidden="true">&raquo;</span>'+
               "</a>"+
               "</li>"
           )



       }


        //上一页
        function  prePage(){
            if (currentPage == 1) {
                alert("已经是首页了")
            }else{
                currentPage--;
                loadData();
            }
        }

        //下一页
        function nextPage() {
            if (currentPage == pageCount){
                alert("已经是尾页")
            } else{
                currentPage++;
                loadData();
            }
        }


        function  indexPage(index) {

            if (index < 1 || index > pageCount){
                alert("页码不合理!")
            }else{
                currentPage = index;
                loadData();
            }


        }
        
        
        function modify(proId,proName,proImage,proPrice,proKucun,proPutaway,gId) {


             if (confirm("即将修改此商品?")){

                 location.href="http://localhost:8080/productUpdatePage?proId="+proId+"&proName="+proName+
                         "&proImage="+proImage+"&proPrice="+proPrice+"&proKucun="+proKucun+"&proPutaway="+proPutaway
                          +"&gId="+gId;
             }
        }


</script>




</body>
</html>